.tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: var(--px16);
  border-top: var(--px0d5) solid rgba($color: #000000, $alpha: 0.05);
  backdrop-filter: blur(10px) !important;
  background-color: rgb(255 255 255 / .32) !important;

  &-wrap {
    display: flex;
    height: var(--px50);
    align-items: center;

    &-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      &-iconGroup {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
        width: var(--px30);
        height: var(--px30);

        .tab-bar-badge {
          position: absolute;
          top: 0px;
          right: 0px;
          width: var(--px12);
          height: var(--px12);
          border-radius: 50%;
          background-color: #ff0000;
          z-index: 2;
          font-size: var(--px10);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-family: "DIN";
        }
        .tab-bar-dot {
          position: absolute;
          top: var(--px3);
          right: var(--px3);
          width: var(--px9);
          height: var(--px9);
          border-radius: 50%;
          background-color: #ff0000;
          z-index: 2;
        }

        &-icon {
          z-index: 2;
        }

        &-square {
          position: absolute;
          background-color: #23a625;
          width: var(--px12);
          height: 0;
          border-radius: 50%;
          right: var(--px6);
          bottom: var(--px6);
          opacity: 0;
          transform-origin: 80% 80%;
          z-index: 1;
        }

        &-center {
          position: absolute;
          z-index: 2;
        }

        &.animateRotate {
          .tab-bar-wrap-item-iconGroup-center {
            width: var(--px10);
            height: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(135deg);
            border-bottom: var(--px2) solid #000;
          }
        }

        &.animateLine {
          .animateLine-help-curve {
            position: absolute;
            left: var(--px10);
            top: var(--px11);
            z-index: 2;
            height: var(--px16);
            width: var(--px15);
            transform: rotate(180deg);
            background-image: url();
            background-repeat: no-repeat;
            background-size: cover;
            // background-position: 50% 50%;
          }
        }
        &.initialAnimated.animateLine {
          .tab-bar-wrap-item-iconGroup-square {
            height: var(--px14);
            opacity: 1;
          }
          .animateLine-help-curve {
            left: 10%;
            top: 20%;
            transform: rotate(0);
          }
        }
        &.animateTranslate {
          .tab-bar-wrap-item-iconGroup-center {
            border: var(--px3) solid #000;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-110%, 0);
          }
        }

        &.animateEye {
          .animateEye-help-eyes {
            position: absolute;
            bottom: 45%;
            z-index: 2;
            left: 30%;
            display: flex;
            align-items: center;

            height: var(--px2);
            &-single {
              width: var(--px3);
              height: var(--px6);
              background-color: #000;
              border-radius: 50%;
              margin-right: var(--px4);
            }
          }
        }
        &.animated {
          .tab-bar-wrap-item-iconGroup-square {
            animation: 1s ease-in both square;
            transition: height 0.3s ease 0.25s;
            height: var(--px12);
          }

          .tab-bar-wrap-item-iconGroup-icon {
            animation: 0.5s ease-in both iconAnimate;
          }

          &.animateRotate {
            .tab-bar-wrap-item-iconGroup-center {
              animation: 0.3s ease-in 0.2s both animateRotateCenter;
            }
          }

          &.animateLine {
            .animateLine-help-curve {
              left: 10%;
              top: 20%;
              transform: rotate(0);
              animation: 0.5s ease-in both animateLineCurve;
            }
          }

          &.animateTranslate {
            .tab-bar-wrap-item-iconGroup-center {
              animation: 0.3s ease-in 0.2s both animateTranslateCenter;
            }

            .animateTranslate-help {
              &-lineHidden {
                animation: 0.2s ease-in 0.5s both animateTranslate;
              }
            }
          }
          &.animateEye {
            .animateEye-help-eyes {
              overflow: hidden;
              animation: 0.5s ease-in both animateEyes;
            }
          }
        }
      }
      &-text {
        font-size: var(--px12);
        margin-top: -2Px;
      }
    }
  }
}

@keyframes iconAnimate {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes square {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  60% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes animateRotateCenter {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
  }

  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1);
  }

  100% {
    transform: translate(-50%, -50%) rotate(135deg) scale(1);
  }
}

@keyframes animateTranslateCenter {
  0% {
    transform: translate(-50%, 0%) scale(0);
  }

  50% {
    transform: translate(-50%, 0%);
  }

  100% {
    transform: translate(50%, 0%);
  }
}

@keyframes animateTranslate {
  0% {
    bottom: 0;
  }

  100% {
    bottom: calc(0 - var(--px10));
  }
}

@keyframes animateLineCurve {
  0% {
    width: 0;
  }

  20% {
    width: var(--px3);
  }

  40% {
    width: var(--px5);
  }

  100% {
    width: var(--px15);
  }
}

@keyframes animateEyes {
  0% {
    height: var(--px6);
  }

  50% {
    height: 0px;
  }
  100% {
    height: var(--px6);
  }
}
